import { VNode } from 'vue'
import { Custom, CustomEnum } from 'custom/index'

export interface TableColumnOption {
  prop?: string;
  label?: string;
  width?: number | string;
  minWidth?: number | string;
  type?: 'default' | 'selection' | 'index' | 'expand';
  align?: 'left' | 'center' | 'right';
  formatter?: (row: any, column: any, cellValue: any, index: number) => VNode | string;
  sortable?: boolean | 'custom';
  className?: string;
  [prop: string]: any;
}

export default class TableColumn extends Custom {
  public static name: CustomEnum = 'TableColumn';

  prop(prop: string) {
    this._props.prop = prop
    return this
  }
  type(type: 'default' | 'selection' | 'index' | 'expand') {
    this._props.type = type
    return this
  }
  align(align?: 'left' | 'center' | 'right') {
    this._props.align = align
    return this
  }
  label(label: string) {
    this._props.label = label
    return this
  }
  width(width: number | string) {
    this._props.width = width
    return this
  }
  minWidth(minWidth: number | string) {
    this._props.minWidth = minWidth
    return this
  }
  showOverflowTooltip(showOverflowTooltip: boolean = true) {
    this._props.showOverflowTooltip = showOverflowTooltip
    return this
  }
  formatter(formatter: (row: any, column: any, cellValue: any, index: number) => VNode | string) {
    this._props.formatter = formatter
    return this
  }
  toFixed(num: number = 0) {
    return this.formatter((_, __, cellValue) => {
      return cellValue ? cellValue.toFixed(num) : (0).toFixed(num)
    } )
  }
  percent() {
    return this.formatter((_, __, cellValue) => {
      return cellValue ? cellValue + `%` : '0%'
    } )
  }
  toFixedPercent(num: number = 0) {
    return this.formatter((_, __, cellValue) => {
      return cellValue ? cellValue.toFixed(num) + '%' : (0).toFixed(num) + '%'
    } )
  }
  sortable(sortable: boolean | 'custom' = 'custom') {
    this._props.sortable = sortable
    return this
  }
  fixed(fixed: string) {
    this._props.fixed = fixed
    return this
  }
}
